<div id="logo_banner" style="margin: 0 auto; width: 1024px; margin-top: 20px;">
	<img src="http://placehold.it/1024x200&text=Logo+banner" alt="Logo banner" style="margin-top: 15px;" />				
</div>	

<div id="site_content" style="margin: 0 auto; width: 1024px;">
	<div id="menu">  
		<ul>  
			<li><a href="/home/" title="Home">Home</a></li>  
			<li><a href="/over-ons/" title="Over ons">Over ons</a></li>  
			<li><a href="/producten/" title="Producten">Producten</a></li>  
			<li><a href="/contact/" title="Contact">Contact</a></li>  
		</ul>  
	</div>  
	
	<div id="content" style="float: left; width: 800px; background-color: #00fff0; padding: 10px;">		
		<p>NEWS</p>
		{{=it.title}}
		<p id="message"></p>
		
		<div id="cityoverview" style="position: relative;">
			<img src="http://placehold.it/800x600&text=City+Overview" alt="City Overview" />					
			<img id="wall" src="http://placehold.it/600x450.png/ff00ff/&text=Walls" alt="wall_1" style="position: absolute; top: 75px; left: 100px;" />
			
			<img id="building0" src="http://placehold.it/150.png/33FF66/&text=Townhall" alt="building0_1_3" style="position: absolute; top: 225px; left: 325px;" />
			<img id="building1" src="http://placehold.it/150.png/33FF66/&text=Building+1" alt="building1_15_1" style="position: absolute; top: 125px; left: 175px;" />
			<img id="building2" src="http://placehold.it/150.png/33FF66/&text=Building+2" alt="building2_15_3" style="position: absolute; top: 125px; left: 475px;" />
			<img id="building3" src="http://placehold.it/150.png/33FF66/&text=Building+3" alt="building3_15_5" style="position: absolute; top: 325px; left: 175px;" />
			<img id="building4" src="http://placehold.it/150.png/33FF66/&text=Building+4" alt="building4_15_2" style="position: absolute; top: 325px; left: 475px;" />					
		</div>
	</div>
</div>

<div id="dialog" title="Basic dialog">
	<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<script>
	$(function(){
		var socket = io.connect();
		var user;

		socket.on('error', function (reason){
		  console.error('Unable to connect Socket.IO', reason);
		});			

		socket.on('connect', function () {
			socket.emit('checklogin');
			
			socket.on('disconnect', function() {
				$("#message").text('Disconnected');
			});

			socket.on('loginsucces', function (userdata) {  
				$("#message").text('Login succeeded for: ' + userdata.username);                    
				user = userdata;
			});				
			
			socket.on('loginfailed', function () {
				$("#message").text('Login failed');
			});			
		});
		
		$( "#dialog" ).dialog({
			draggable: false,
			resizable: false,
			modal: true,
			minWidth: 200,
			title: "Upgrade"
		});	
	});
</script>	
